<template>
  <el-dialog
    v-model="localVisible"
    width="1200px"
    class="ba-operate-dialog order-info-dialog"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    @update:model-value="updateVisible"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
        订单详情
      </div>
    </template>
    <el-scrollbar v-loading="loading" class="ba-table-form-scrollbar">
      <div class="ba-operate-form order-info-content">
        <!-- 订单信息 -->
        <div class="info-section">
          <h3 class="section-title">订单信息</h3>
        <el-descriptions border :column="2">
          <el-descriptions-item label="订单号">{{ orderData.order_no || '-' }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ orderData.username || '-' }}</el-descriptions-item>
          <el-descriptions-item label="下单用户">{{ orderData.nickname || '-' }} (用户ID: {{ orderData.user_id || '-' }})</el-descriptions-item>
          <el-descriptions-item label="电话">{{ orderData.phone || '-' }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ formatTime(orderData.createtime) }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ orderData.address || '-' }}</el-descriptions-item>
          <el-descriptions-item label="支付方式">{{ orderData.pay_type || '-' }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ orderData.remark || '-' }}</el-descriptions-item>
          <el-descriptions-item label="支付时间">{{ formatTime(orderData.pay_time) }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 订单状态 -->
      <div class="info-section">
        <h3 class="section-title">订单状态</h3>
        <el-descriptions border :column="2">
          <el-descriptions-item label="订单状态">
            <span class="order-status" :class="`status-${orderData.status}`">{{ getStatusText(orderData.status) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="收货时间">{{ formatTime(orderData.receipt_time) }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 物流信息 -->
      <div class="info-section" v-if="orderData.express_name && orderData.express_no">
        <h3 class="section-title">物流信息</h3>
        <el-descriptions border :column="2">
          <el-descriptions-item label="发货时间">{{ formatTime(orderData.ship_time) }}</el-descriptions-item>
          <el-descriptions-item label="物流公司">{{ orderData.express_name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="物流单号">{{ orderData.express_no || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 操作按钮区域 -->
      <div class="order-actions">
        <el-button v-if="orderData.express_name && orderData.express_no" type="primary" @click="checkExpress">物流查询</el-button>
        <el-button @click="handlePrint">打印</el-button>
      </div>
      </div>
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, inject, watch } from 'vue'
import { useConfig } from '/@/stores/config'

interface OrderData {
  order_no: string
  username?: string
  nickname?: string
  user_id?: string | number
  phone?: string
  createtime?: string | number
  address?: string
  pay_type?: string
  remark?: string
  pay_time?: string | number
  status?: number
  receipt_time?: string | number
  express_name?: string
  express_no?: string
  ship_time?: string | number
  [key: string]: any
}

const props = defineProps<{
  visible: boolean
  data?: OrderData
}>()

const config = useConfig()
const loading = ref(false)

// 本地可见性状态
const localVisible = ref(false)

// 监听props.visible变化，更新本地状态
watch(() => props.visible, (newVal) => {
  localVisible.value = newVal
}, { immediate: true })

// 更新可见性事件
const updateVisible = (value: boolean) => {
  localVisible.value = value
  emit('update:visible', value)
}

const emit = defineEmits<{
  'update:visible': [visible: boolean]
}>()

// 订单数据
const orderData = computed(() => props.data || {}) as any

// 状态文本映射
const getStatusText = (status?: number) => {
  if (!status) return ''
  const statusMap: Record<number, string> = {
    10: '待支付',
    20: '已取消',
    30: '待发货',
    31: '待收货',
    32: '已完成',
    33: '退货退款',
    34: '退货中',
    35: '售后完成',
    40: '退款中',
    41: '退款完成',
    42: '拒绝退款'
  }
  return statusMap[status] || '未知状态'
}

// 时间格式化
const formatTime = (time: any) => {
  if (!time || time === '0000-00-00 00:00:00' || time === '0') {
    return ''
  }

  try {
    const timeStr = String(time).trim();
    let date: Date;

    if (/^\d{10}$/.test(timeStr)) {
      date = new Date(Number(timeStr) * 1000);
    } else if (/^\d{13}$/.test(timeStr)) {
      date = new Date(Number(timeStr));
    } else {
      date = new Date(time);
    }

    if (isNaN(date.getTime())) {
      return String(time);
    }

    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hour = String(date.getHours()).padStart(2, '0');
    const minute = String(date.getMinutes()).padStart(2, '0');
    const second = String(date.getSeconds()).padStart(2, '0');

    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  } catch (error) {
    return String(time);
  }
}

// 处理关闭
const handleClose = () => {
  localVisible.value = false
  emit('update:visible', false)
}

// 处理打印
const handlePrint = () => {
  console.log('打印订单:', orderData.value)
  // 这里可以实现打印功能
  alert('打印功能待实现')
}

// 物流查询
const checkExpress = () => {
  console.log('查询物流:', orderData.value.express_name, orderData.value.express_no)
  // 这里可以实现跳转到物流查询页面或打开物流查询弹窗
  alert(`物流公司: ${orderData.value.express_name}\n物流单号: ${orderData.value.express_no}`)
}
</script>

<style scoped lang="scss">
.order-info-dialog {
  .ba-table-form-scrollbar {
    max-height: 60vh;
  }

  .ba-operate-form {
    padding: 0;
  }

  .order-info-content {
    .info-section {
      margin-bottom: 24px;
      padding: 16px;
      background-color: #fafafa;
      border-radius: 4px;

      .section-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 16px;
        color: #303133;
        border-left: 3px solid #409eff;
        padding-left: 10px;
      }
    }

    .el-descriptions {
      margin-bottom: 0;

      .el-descriptions__row {
        margin-bottom: 0;
      }

      .el-descriptions__label {
        font-weight: 500;
        color: #606266;
        background-color: #fafafa;
      }

      .el-descriptions__content {
        color: #303133;
      }
    }

    .order-status {
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
    }

    .status-10 {
      background-color: #e6f7ff;
      color: #1890ff;
    }

    .status-20 {
      background-color: #f5f5f5;
      color: #909399;
    }

    .status-30,
    .status-31 {
      background-color: #fff7e6;
      color: #fa8c16;
    }

    .status-32 {
      background-color: #f0f9ff;
      color: #00b42a;
    }

    .status-33,
    .status-34,
    .status-40 {
      background-color: #fff0f6;
      color: #f5222d;
    }

    .status-35,
    .status-41,
    .status-42 {
      background-color: #f6ffed;
      color: #52c41a;
    }

    .order-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
      padding: 16px;
      background-color: #fafafa;
      border-radius: 4px;
      justify-content: flex-end;
    }
  }

  :deep(.el-dialog__footer) {
    padding: 10px 20px 20px;
    text-align: flex-end;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
